<!-- 忘记密码 组件 -->
<template>
  <div class="forget">
      <!-- 横线分隔条 -->
      <cross-line></cross-line>
      <!-- 忘记密码 -->
      <form id="forget_password_form" @submit.prevent="handleForgetPassword">
        <mt-field label="手机号" placeholder="请输入手机号"  :attr="{ maxlength: 20, name:'forget_mobile'  }" v-model="forget_mobile" :state="validated_status.forget_mobile"></mt-field>
        <mt-field label="验证码" placeholder="请输入验证码" type="text" v-model="forget_mobile_code">
          <mt-button v-bind:disabled="but_dis" style="margin-top:0px" type="primary" size="small" @click.prevent="handleSendMobileCode">{{get_mobile_code}}</mt-button>
        </mt-field>
        <mt-field label="设置密码" placeholder="请设置6到12位密码" :attr="{ maxlength: 20, name:'password'  }" type="password" v-model="password" :state="validated_status.password"></mt-field>
        <mt-field label="确认密码" placeholder="请确认密码" :attr="{ maxlength: 20, name:'confirm_password'  }" type="password" v-model="confirm_password" :state="validated_status.confirm_password"></mt-field>
        <!-- 横线分隔条 -->
        <cross-line></cross-line>
        <cross-line></cross-line>
        <mt-button type="primary" size="large" @click="handleForgetPassword" style="height:40px; border-radius: 0px!important;">确认</mt-button>
      </form>
  </div>
</template>

<script>
import { forgetPassword, sendMobileCode} from '@/api/user'
import { validated, validatedError, validatedPhone} from '@/utils/validator'
import CrossLine from '@/components/base/cross-line/cross-line'
import { Indicator,Toast } from 'mint-ui'
import md5 from 'js-md5'
import mui from 'static/js/mui'
export default {
  components: { CrossLine },
  data () {
    return {
      forget_mobile: '',
      password: '',
      confirm_password: '',
      forget_mobile_code: '',
      status: 0,
      get_mobile_code:'获取验证码',
      but_dis:false,
      code_time: 60,
      validated_status: {
        'forget_mobile': null,
        'password': null,
        'confirm_password':null
      },
      forget_password_option:[
        {
          name: 'forget_mobile',
          display:"你输入的不是合法手机号|手机号必填|手机号太长|手机号太短",
          rules: 'is_phone|required|max_length(11)|min_length(11)'
        },
        {
          name: 'password',
          display:"密码必填|密码不能大于12位|密码不能小于6位",
          rules: 'required|max_length(12)|min_length(6)'
        },
        {
          name: 'confirm_password',
          display:"确认密码必填|输入的两次密码不一致",
          rules: 'required|same(password)'
        }
      ]
    }
  },
  props: {},
  watch: {},
  methods: {
    handleSendMobileCode() {
      if(validatedPhone(this.forget_mobile)) {
        //处理按钮60s封闭
        this.settime()
        //加入loading效果
        Indicator.open('加载中...');
        //发送 
        sendMobileCode(this.forget_mobile).then(response => {
          //去除状态
          this.validated_status.forget_mobile = null
          //去除loading效果
          Indicator.close();
        })
      }else{
        Toast("你输入的不是合法手机号")
      }
      this.validated_status.forget_mobile = 'error'
      return false
    },
    settime(){
      if (this.code_time == 0) { 
        this.but_dis = false  
        this.get_mobile_code="获取验证码"
        this.code_time = 60
        return
      } 
      else {
        this.but_dis = true 
        this.get_mobile_code="重发(" + this.code_time + ")"; 
        this.code_time--; 
      } 
      //定义下that变量，防止this被替换
      let that = this
      setTimeout(function() { 
        that.settime() 
      },1000)
    },
    handleForgetPassword () {
      //验证处理
      var errors = validated('forget_password_form',this.forget_password_option)
      //根据错误生成input状态
      validatedError(errors ,this.validated_status)
      if(errors.length == 0){
        let that = this
        //进行MD5密码
        let password = md5(this.password)
        //无报错处理
        forgetPassword(this.forget_mobile, password, this.forget_mobile_code).then(response => {
          mui.alert(response.msg, '提示', ['确定'], function() {
            that.$router.push("/login")
          },'div');
          //this.$router.push("/login")
        })
      }
    }
  },
  filters: {},
  computed: {},
  created () {},
  mounted () {
  }
}
</script>

<style lang="scss">
@import '~@/assets/scss/const.scss';
@import '~@/assets/scss/mixin.scss';

.forget {
  color: #333;
  margin-top: 40px;
  background-color: #fff;
  overflow: visible;
  .login-wrapper {
    margin-top: 20px;
    overflow: hidden;
    .mint-button {
      margin-top: 30px;
    }
  }
  .register-wrapper {
    margin-top: 20px;
    overflow: hidden;
    .mint-button {
      margin-top: 30px;
    }
  }
  .mint-cell-value .mint-field-core{
    line-height: 21px;
    width: 100%;
    height: 40px;
    margin-bottom:0px;
    padding: 10px 15px;
    -webkit-user-select: text;
    border:none
  }
  .forget_passwword{
    float:right;
    padding:5px;
  }
}
.mint-tab-item-label{
  font-size:15px;
}
.mint-button{
  font-size:15px;
}
.mint-button--small{
  font-size:13px;
}
</style>